import { useForm } from 'react-hook-form';
import { useTranslation } from 'react-i18next';
import { useDispatch } from 'react-redux';
import Alert from 'src/component/Alert';
import Button from 'src/component/Button';
import Form from 'src/component/Form';
import FormInput from 'src/component/FormInput';
import Modal from 'src/component/Modal';
import { Severity } from 'src/constant/Notification';
// import { PostWithdrawalResponse } from 'src/model/Api';
// import { WithdrawalVeriyfyForm } from 'src/model/Form';
import { openSnackbar } from 'src/redux/uiSlice';
// import { resendWithdrawalVerify, verifyWithdrawal } from 'src/service/propertyService';
import style from './VerifyModal.module.scss';

type PostWithdrawalResponse = any
type WithdrawalVeriyfyForm = any

type Props = {
  open: boolean;
  onClose: () => void;
  withdrawalData?: PostWithdrawalResponse;
  refresh: () => void;
};

const VerifyModal = ({ open, onClose, withdrawalData, refresh }: Props) => {
  const { t } = useTranslation();
  const dispatch = useDispatch();
  const methods = useForm<WithdrawalVeriyfyForm>();

  const onSubmit = (data: WithdrawalVeriyfyForm) => {
    if (!withdrawalData) return;
    // verifyWithdrawal(withdrawalData.id, data.code)
    //   .then(() => {
    //     onClose();
    //     methods.reset();
    //     refresh();
    //   })
    //   .catch((e) => dispatch(openSnackbar({ message: e, severity: 'alert' })));
  };

  const onResend = () => {
    if (!withdrawalData) return;
    // resendWithdrawalVerify(withdrawalData.id).catch((e) =>
    //   dispatch(openSnackbar({ message: e, severity: 'alert' })),
    // );
  };

  return (
    <Modal open={open} handleClose={onClose}>
      <div>
        <div className={style.heading}>{t('record.desc.verifyHead')}</div>
        <Form methods={methods} onSubmit={onSubmit} className={style.form}>
          <FormInput label="{t('record.desc.verifyLabel')}" name="code" autoFocus />
          <Alert className={style.alert} severity={Severity.Clear}>
            {t('record.desc.verifyHint')}
          </Alert>
          <div className={style.resend}>
            <div>{t('record.desc.resendHint')}</div>
            <Button appearance="text" size="large" onClick={onResend} type="button">
              {t('record.desc.resend')}
            </Button>
          </div>
          <div className={style.buttons}>
            <Button appearance="secondary" onClick={onClose} type="button">
              {t('act.cancel')}
            </Button>
            <Button type="submit">{t('act.submit')}</Button>
          </div>
        </Form>
      </div>
    </Modal>
  );
};

export default VerifyModal;
